<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-03-01 15:32:21
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-10-17 17:16:49
 * @Description:
 *
-->

<template>
  <div ref="algAnalyseResults" class="alg-analyse-results-ctn">
    <div v-if="showTitle" class="title">{{ title }}</div>
    <div
      v-for="(result, index) in resultsInfo"
      :key="index"
      :class="['cloud', result.isRecommend ? 'recommend' : '']"
    >
      <div class="topline"></div>

      <div v-if="!result.resourceEnable" class="unable">
        <div class="img-wrapper">
          <img
            class="cloudImg"
            :src="getCloudProviderImgSrc(result.providerName)"
            alt=""
          />
        </div>
        <div class="divider"></div>
        <div class="text-wrapper">
          <img
            class="icon"
            src="@/assets/imgs/intelligent-scheduling/img_error.png"
            alt=""
          />
          <div class="text">该云商规格资源不可用</div>
        </div>
      </div>
      <template v-else>
        <div class="cloud-top">
          <div class="img-wrapper">
            <img
              class="cloudImg"
              :src="getCloudProviderImgSrc(result.providerName)"
            />
            <div class="accountName">{{ result.accountName }}</div>
            <div v-if="result.isRecommend" class="recommend-text">
              <span>算法推荐</span>
            </div>
          </div>
          <div
            v-if="
              info.userChooseCloud === result.providerName &&
                info.userChooseAccountName === result.accountName
            "
            class="btn-choosed"
          >
            已选
          </div>
          <el-button
            v-else
            class="btn-choose"
            :loading="choosingIndex === index"
            :disabled="!canChoose"
            @click="chooseCluster(index)"
          >
            选择
          </el-button>
        </div>
        <div class="cloud-center">
          <div class="price-wrapper">
            <div v-if="result.saving.length === 0" class="single">
              <div class="price text">{{ result.price }}</div>
              <div v-if="result.price !== '-'" class="unit text">
                {{ getPriceDescribe(result.isPrivateCloud) }}
              </div>
              <div v-if="result.price !== '-'" class="priceShowUnit text">
                /{{ result.priceShowUnit }}
              </div>
            </div>
            <template v-if="result.saving.length > 0">
              <div class="price">
                <div class="price text">{{ result.price }}</div>
                <div class="unit text">
                  {{ getPriceDescribe(result.isPrivateCloud) }}
                </div>
                <div class="priceShowUnit text">
                  /{{ result.priceShowUnit }}
                </div>
              </div>
              <div class="saving-wrapper">
                <div class="hint">较</div>
                <div
                  v-for="(savingItem, savingIndex) in result.saving"
                  :key="savingIndex"
                  class="saving"
                  v-html="savingItem"
                ></div>
              </div>
            </template>
          </div>
          <div class="divider"></div>
          <div ref="resCtn" class="res">
            <div class="basic">
              <div class="onethrid">
                <div class="row">
                  <div
                    class="row-title"
                    :style="{ 'margin-right': resItemTitleMargin + 'px' }"
                  >
                    资源类型
                  </div>
                  <div class="row-content">{{ result.resourceType }}</div>
                </div>
                <div class="row">
                  <div
                    class="row-title"
                    :style="{ 'margin-right': resItemTitleMargin + 'px' }"
                  >
                    CPU规格
                  </div>
                  <div class="row-content">
                    {{ result.specs }}
                  </div>
                </div>
              </div>
              <div class="line"></div>
              <div class="onethrid">
                <div class="row">
                  <div
                    class="row-title"
                    :style="{ 'margin-right': resItemTitleMargin + 'px' }"
                  >
                    带宽
                  </div>
                  <div class="row-content">{{ result.bandwidth }}</div>
                </div>
                <div class="row">
                  <div
                    class="row-title"
                    :style="{ 'margin-right': resItemTitleMargin + 'px' }"
                  >
                    存储
                  </div>
                  <el-tooltip
                    v-if="resCtnWidth < 650 && result.disk.length > 10"
                    effect="dark"
                    :content="result.disk"
                    placement="top-start"
                  >
                    <div
                      class="row-content"
                      :style="{ width: (resCtnWidth * 80) / 460 + 'px' }"
                    >
                      {{ result.disk }}
                    </div>
                  </el-tooltip>
                  <div
                    v-else
                    class="row-content"
                    :style="{ width: (resCtnWidth * 80) / 460 + 'px' }"
                  >
                    {{ result.disk }}
                  </div>
                </div>
              </div>
              <div class="line"></div>
              <div class="onethrid">
                <div class="row">
                  <div
                    class="row-title"
                    :style="{ 'margin-right': resItemTitleMargin + 'px' }"
                  >
                    {{ result.isPrivateCloud ? "可用域" : "数据中心" }}
                  </div>
                  <el-tooltip
                    v-if="resCtnWidth < 650 && result.region.length > 12"
                    effect="dark"
                    :content="result.region"
                    placement="top-start"
                  >
                    <div
                      class="row-content"
                      :style="{ width: (resCtnWidth * 100) / 460 + 'px' }"
                    >
                      {{ result.region }}
                    </div>
                  </el-tooltip>
                  <div
                    v-else
                    class="row-content"
                    :style="{ width: (resCtnWidth * 100) / 460 + 'px' }"
                  >
                    {{ result.region }}
                  </div>
                </div>
                <div class="row">
                  <div
                    class="row-title"
                    :style="{ 'margin-right': resItemTitleMargin + 'px' }"
                  >
                    集群
                  </div>
                  <el-tooltip
                    v-if="resCtnWidth < 650 && result.clusterName.length > 13"
                    effect="dark"
                    :content="result.clusterName"
                    placement="top-start"
                  >
                    <div
                      class="row-content"
                      :style="{ width: (resCtnWidth * 100) / 460 + 'px' }"
                    >
                      {{ result.clusterName }}
                    </div>
                  </el-tooltip>
                  <div
                    v-else
                    class="row-content"
                    :style="{ width: (resCtnWidth * 100) / 460 + 'px' }"
                  >
                    {{ result.clusterName }}
                  </div>
                </div>
              </div>
            </div>
            <div v-if="result.calculateType === 'GPU'" class="extra">
              <div class="row">
                <div
                  class="row-title"
                  :style="{ 'margin-right': resItemTitleMargin + 'px' }"
                >
                  GPU规格
                </div>
                <div class="row-content">{{ result.gpuSpecs }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { isEmptyString } from '@/utils/index'
import { updateUserChoose } from '@/api/cnap/app-service'
import {
  getClusterProviderChn,
  getCloudProviderImg
} from '@/utils/cnap/constant'

const PRICE_UNIT_MAP = {
  hour: '小时',
  Core: 'Core'
}

export default {
  name: 'AlgAnalyseResults',
  components: {},
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    serviceId: {
      type: String,
      default: ''
    },
    canChoose: {
      type: Boolean,
      default: true
    },
    showTitle: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '算法分析'
    }
  },
  data() {
    return {
      resCtnWidth: 700,
      resItemTitleMargin: 15,
      choosingIndex: -1 // 用户正在选择的index
    }
  },
  computed: {
    /**
     * @description: 格式化分析结果
     * @return {*}
     */
    resultsInfo() {
      if (!Array.isArray(this.info.algDeployClusterInfos)) {
        return []
      }
      const arr = []
      for (const item of this.info.algDeployClusterInfos) {
        const resourceEnable = item.code !== 500 // 是否可用
        const isPrivateCloud = item.commerceType === 'private' // 是否私有云
        const resourceType =
          item.resourceType === 'create' || item.resourceType === 'add'
            ? '新增'
            : item.resourceType === 'exist'
              ? '已有'
              : item.resourceType || ''
        let specs = '-' // CPU规格
        let region = '-' // 数据中心 or 可用域
        let bandwidth = '-' // 带宽
        let disk = '-' // 存储
        let charge = '-' // 时长
        let price = '-' //  价格 or 能耗
        let priceShowUnit = '-'
        let gpuSpecs = '-' // GPU规格
        let clusterName = '' // 集群名称
        const saving = [] // 节省
        if (
          resourceEnable &&
          Array.isArray(item.clusterDetails) &&
          item.clusterDetails.length > 0
        ) {
          const element = item.clusterDetails[0] // 只取第一个
          specs = element.cpu ? element.cpu + 'C' + element.memory + 'G' : '-' // CPU规格
          region = isPrivateCloud
            ? element.zoneId
            : element.regionId + '-' + element.zoneId // 数据中心 or 可用域
          bandwidth = element.bandwidth ? element.bandwidth + 'M' : '-' // 带宽
          disk = element.sysDiskSize
            ? element.sysDiskType + ' ' + element.sysDiskSize + 'G'
            : '-' // 存储
          charge = element.chargeCount
            ? element.chargeCount +
              (element.chargeUnit === 'Month' ? '个月' : element.chargeUnit)
            : '-' // 时长
          clusterName = item.name || '-' // 集群名
          if (
            !isEmptyString(element.gpu) &&
            !isEmptyString(element.gpuMemorySize)
          ) {
            gpuSpecs = element.gpu + ' ' + element.gpuMemorySize // GPU规格
          }
          if (element.price) {
            // 存在价格
            price = Number(element.price)
            priceShowUnit = Object.prototype.hasOwnProperty.call(
              PRICE_UNIT_MAP,
              element.priceShowUnit
            )
              ? PRICE_UNIT_MAP[element.priceShowUnit]
              : element.priceShowUnit
            if (
              this.info.recommendCloud === item.providerName &&
              this.info.recommendAccountName === item.accountName
            ) {
              // 推荐的云 需要计算节省信息
              for (const item2 of this.info.algDeployClusterInfos) {
                // 只和其他云商的集群比较
                if (
                  !(
                    (
                      item.providerName === item2.providerName &&
                      item.accountName === item2.accountName
                    ) // 非当前云商及账号
                  ) &&
                  Array.isArray(item2.clusterDetails) &&
                  item2.clusterDetails.length > 0 &&
                  Number(item2.clusterDetails[0].price) > 0
                ) {
                  // 获取精度
                  const precision = Math.max(
                    this.getPrecision(item2.clusterDetails[0].price),
                    this.getPrecision(element.price)
                  )
                  saving.push(
                    getClusterProviderChn(
                      this.$store.state.app.cloudVendors,
                      item2.providerName
                    ) +
                      '节省' +
                      (
                        Number(item2.clusterDetails[0].price) -
                        Number(element.price)
                      ).toFixed(precision) +
                      this.getPriceDescribe(isPrivateCloud) +
                      '/' +
                      (Object.prototype.hasOwnProperty.call(
                        PRICE_UNIT_MAP,
                        element.priceShowUnit
                      )
                        ? PRICE_UNIT_MAP[element.priceShowUnit]
                        : element.priceShowUnit)
                  )
                }
              }
            }
          }
        }
        arr.push({
          resourceEnable: resourceEnable,
          isRecommend:
            item.providerName === this.info.recommendCloud &&
            this.info.recommendAccountName === item.accountName,
          providerName: item.providerName,
          providerNameCh: getClusterProviderChn(
            this.$store.state.app.cloudVendors,
            item.providerName
          ),
          accountName: item.accountName,
          calculateType: String(item.calculateType).toUpperCase(), // 计算类型 CPU GPU
          isPrivateCloud: isPrivateCloud, // 是否私有云
          resourceType: resourceType,
          specs: specs,
          region: region,
          bandwidth: bandwidth,
          disk: disk,
          clusterName: clusterName,
          charge: charge,
          gpuSpecs: gpuSpecs,
          price: price,
          priceShowUnit: priceShowUnit,
          saving: saving
        })
      }
      return arr
    }
  },
  destroyed() {},
  mounted() {
    this.resCtnWidth = this.$refs.resCtn[0].clientWidth
    this.resItemTitleMargin = (this.resCtnWidth * 15) / 460
  },
  methods: {
    /**
     * @description: 获取精度
     * @param {*} num
     * @return {*}
     */
    getPrecision(num) {
      const arr = String(num).split('.')
      if (arr.length > 1) {
        return arr[1].length
      }
      return 0
    },
    /**
     * @description: 获取价格描述
     * @param {*} isPrivateCloud
     * @return {*}
     */
    getPriceDescribe(isPrivateCloud) {
      return isPrivateCloud ? 'W' : '元'
    },
    /**
     * @description: 获取云商图标
     * @param {*} key
     * @return {*}
     */
    getCloudProviderImgSrc(key) {
      return getCloudProviderImg(
        this.$store.state.app.cloudVendors,
        key,
        'mini'
      )
    },
    /**
     * @description: 用户选择集群
     * @return {*}
     */
    chooseCluster(index) {
      this.choosingIndex = index
      const params = {
        svcId: this.serviceId,
        userChooseCloud: this.resultsInfo[index].providerName, // 云商
        userChooseAccountName: this.resultsInfo[index].accountName // 云商账户
      }
      updateUserChoose(params)
        .then((res) => {
          this.$emit('choose-success', params) // 抛出事件
        })
        .finally(() => {
          this.choosingIndex = -1
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.alg-analyse-results-ctn {
  background: #ffffff;
  border-radius: 7px;
  padding: 15px 20px;

  .title {
    .textStyle(16px, 600, #4a4a4a);
    line-height: 22px;
    margin-bottom: 10px;
  }

  .cloud {
    box-sizing: border-box;
    min-height: 140px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    &.recommend {
      background: linear-gradient(359deg, #e9f6ff 0%, #f4faff 100%);
      box-shadow: 0px 0px 10px 0px rgba(0, 90, 159, 0.3);
      border-radius: 6px 6px 4px 4px;
      border: 2px solid #00c4ff;
    }

    .unable {
      padding: 0 20px;
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .img-wrapper {
        width: 24%;
        .cloudImg {
          height: 30px;
        }
      }
      .divider {
        width: 1px;
        height: 44px;
        background-color: #f2f2f2;
      }

      .text-wrapper {
        width: 70%;
        display: flex;
        align-items: center;

        .icon {
          height: 25px;
          margin-right: 10px;
        }
      }
    }

    .topline {
      height: 5px;
      background: linear-gradient(213deg, #00c4ff 0%, #0091ff 100%);
      border-radius: 4px 4px 0px 0px;
    }

    .cloud-top {
      margin: 15px 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .img-wrapper {
        height: 30px;
        display: flex;
        align-items: center;
        position: relative;

        .cloudImg {
          height: 30px;
        }
        .accountName {
          margin-left: 3px;
          .textStyle(14px, 500, #4a4a4a);
          line-height: 20px;
        }
        .recommend-text {
          position: absolute;
          left: calc(100% + 5px);
          top: -8px;
          width: 58px;
          height: 21px;
          line-height: 21px;
          background: linear-gradient(360deg, #00c4ff 0%, #0091ff 100%);
          border-radius: 7px 6px 6px 1px;
          text-align: center;
          span {
            display: inline-block;
            .textStyle(12px, 600, #FFFFFF);
            transform: scale(0.9);
          }
        }
      }
      .btn-choosed {
        box-sizing: border-box;
        width: 85px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background: #d9ebff;
        border-radius: 2px;
        border: 1px solid #0091ff;
        .textStyle(12px , 500, #0091ff);
      }
      .btn-choose {
        box-sizing: border-box;
        width: 85px;
        height: 25px;
        line-height: 25px;
        padding: 0;
        font-size: 12px;
        border-radius: 2px;
      }
    }
    .cloud-center {
      margin: 10px 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price-wrapper {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .single {
          display: flex;
          align-items: baseline;
          justify-content: center;
          .price {
            .textStyle(42px, 600, #262626);
            line-height: 60px;
          }
          .unit {
            .textStyle(12px, 500, #696969);
            line-height: 28px;
            margin-left: 3px;
          }
          .priceShowUnit {
            .textStyle(12px, 500, #696969);
            line-height: 17px;
          }
        }
        .price {
          display: flex;
          align-items: baseline;
          justify-content: center;
          .price {
            .textStyle(32px, 600, #0091ff);
            line-height: 45px;
          }
          .unit {
            .textStyle(12px, 500, #0091ff);
            line-height: 28px;
            margin-left: 3px;
          }
          .priceShowUnit {
            .textStyle(12px, 500, #0091ff);
            line-height: 17px;
          }
        }
        .saving-wrapper {
          display: inline-block;
          margin-bottom: 15px;
          position: relative;
          .hint {
            position: absolute;
            left: 0;
            top: 0;
            .textStyle(12px, 500, #C3C3C3);
            line-height: 17px;
          }
          .saving {
            padding-left: 15px;
            .textStyle(12px, 500, #C3C3C3);
            line-height: 17px;
            word-break: break-all;
          }
        }
      }

      .divider {
        width: 1px;
        height: 44px;
        background-color: #f2f2f2;
      }

      .res {
        width: 70%;

        .basic {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .onethrid {
            display: flex;
            flex-direction: column;

            .row {
              display: flex;
              flex-direction: row;
              align-items: center;
              &:last-child {
                margin-top: 10px;
              }

              .row-title {
                margin-right: 15px;
                .textStyle(14px, 400, #C3C3C3);
                line-height: 20px;
              }
              .row-content {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                .textStyle(14px, 500, #4a4a4a);
                line-height: 20px;
              }
            }
          }

          .line {
            width: 1px;
            height: 32px;
            background-color: #f2f2f2;
          }
        }
        .extra {
          margin: 10px 0;
          .row {
            display: flex;
            flex-direction: row;
            align-items: center;

            .row-title {
              margin-right: 15px;
              .textStyle(14px, 400, #C3C3C3);
              line-height: 20px;
            }
            .row-content {
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              .textStyle(14px, 500, #4a4a4a);
              line-height: 20px;
            }
          }
        }
      }
    }
  }

  .top {
    margin: 0 auto;
    max-width: 650px;

    .clusters {
      display: flex;
      align-items: flex-end;
      .cluster {
        flex: 1;
        height: 170px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e3e3e3;
        margin-left: 20px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        position: relative;

        &:first-child {
          margin-left: 0px;
        }
        &.recommend {
          flex: 1.02;
          height: 230px;
          background: linear-gradient(351deg, #eaf6ff 0%, #f9fcff 100%);
          box-shadow: 0px 0px 10px 0px rgba(0, 90, 159, 0.3);
          border-radius: 6px;
          border: 2px solid rgba(0, 196, 255, 1);
          .name {
            .textStyle(20px , 600, #262626);
            line-height: 28px;
          }
          .priceWrapper .text {
            color: #0091ff;
          }
        }

        .bar {
          position: absolute;
          left: 0px;
          top: 0px;
          right: 0px;
          height: 5px;
          background: linear-gradient(213deg, #00c4ff 0%, #0091ff 100%);
          border-radius: 4px 4px 0px 0px;
        }
        .imgTop {
          position: absolute;
          width: 18px;
          left: 10px;
          top: 15px;
        }
        .btn-choosed {
          margin-bottom: 19px;
          box-sizing: border-box;
          width: 85px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: #d9ebff;
          border-radius: 2px;
          border: 1px solid #0091ff;
          .textStyle(12px , 500, #0091ff);
        }
        .btn-choose {
          margin-bottom: 19px;
          box-sizing: border-box;
          width: 85px;
          height: 25px;
          line-height: 25px;
          padding: 0;
          font-size: 12px;
          border-radius: 2px;
        }
        .priceWrapper {
          margin-bottom: 10px;
          display: flex;
          align-items: baseline;
          justify-content: center;
          .unit {
            .textStyle(20px , bold, #262626);
            line-height: 28px;
            margin-right: 3px;
          }
          .price {
            .textStyle(52px , 500, #262626);
            line-height: 60px;
          }
          .priceShowUnit {
            .textStyle(12px , 500, #696969);
            line-height: 17px;
          }
        }
        .textWrapper {
          margin-bottom: 4px;
          margin-top: 6px;
          .recommendText {
            display: flex;
            align-items: center;
            justify-content: center;
            .text {
              .textStyle(14px , 500, #0091ff);
              margin-right: 4px;
            }
            .img {
              width: 12px;
            }
          }
          .isolation {
            .textStyle(12px , 500, #0091ff);
            height: 17px;
          }
        }
        .savingWrapper {
          margin-top: 2px;
          min-height: 34px;
          .saving {
            .textStyle(12px , 500, #C3C3C3);
            line-height: 17px;
          }
        }
        .name {
          .textStyle(16px , 600, #262626);
          line-height: 22px;
        }
      }
    }
  }
  .bottom {
    margin-top: 30px;
    width: 100%;

    .column {
      display: inline-block;
      width: 26%;

      &.column1 {
        width: 22%;
        .item {
          padding-left: 20px;
          .text {
            width: 58px;
            text-align: right;
          }
        }
      }

      .provider {
        font-weight: 500;
      }

      .item {
        height: 30px;
        line-height: 30px;
        .textStyle(12px , 400, #4a4a4a);
        text-align: left;
        &.region {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        &:nth-child(even) {
          background: #f8f8f8;
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
